<template>
  <div class="lix-od">
    <header>
      <div class="header__tip">
        <div class="left">
          <div>{{ order.status_text }}</div>
          <div class="tips" v-if="order.mark">{{ order.mark[0] }}</div>
        </div>
        <div class="right">
          <image src="../static/images/product.png"/>
        </div>
      </div>
      <div class="address-container">
        <div class="address-wrap">
          <div class="logo">
            <image src="../static/images/address.png"/>
            <div class="name">{{ address.name }} {{ address.mobile }}</div>
          </div>
          <div>
            <div class="detail">{{ address.province }} {{ address.city }} {{ address.district }} {{ address.address }}</div>
          </div>
        </div>
      </div>
    </header>
    <div class="lix-od__content">
      <div class="lix-odl__celllist goodscontainer">
        <div class="lix-odl__item" v-for="(good, index) in order.goods" :key="index">
          <div class="content">
            <div class="left">
              <div class="logo">
                <image :src="good.cover" />
              </div>
              <div class="info">
                <div class="title">{{ good.name }}</div>
                <div>{{ good.sku }}</div>
              </div>
            </div>
            <div class="right">
              <div class="price"><span>￥</span>{{ good.price }}</div>
              <div style="text-align: right">x{{ good.number }}</div>
            </div>
          </div>
          <div class="seperate"></div>
        </div>
      </div>
      <div class="lix-od__pricewrap">
        <div class="left">
            <div>订单金额:</div>
            <div>免运费</div>
        </div>
        <div class="right">￥{{ order.amount }}</div>
      </div>
      <div class="lix-od__shouldpay">
        <div>应付金额：</div>
        <div><span>￥</span>{{ order.pay }}</div>
      </div>
      <div class="lix-od__infowrap">
        <div class="cell">
          <div>下单日期</div>
          <div>{{ order.order_time }}</div>
        </div>
        <div class="cell">
          <div>订单编号</div>
          <div>{{ order.order_no }}</div>
        </div>
        <div class="cell">
          <div>收货时间</div>
          <div>不限送货时间</div>
        </div>
        <div class="cell">
          <div>发票抬头</div>
          <div>个人</div>
        </div>
        <div class="cell">
          <div>发票类型</div>
          <div>电子发票</div>
        </div>
      </div>
    </div>
    <div class="fixed-view"></div>
    <footer>
      <!-- <button>取消订单</button> -->
      <div>应付金额：<span><span class="unit">￥</span>{{ order.pay }}</span></div>
      <button @click="tradeOrderCreate">立即付款</button>
    </footer>
  </div>
</template>

<script>
import { getOrderAPI, createTradeOrderApi } from '../api';
import Tip from '../utils/tips';

export default {
  data() {
    return {
      order: {},
      address: {},
      orderId: null
    };
  },
  onLoad(option) {
    console.log(option);
    this.orderId = option.id;
    getOrderAPI(option.id)
      .then(res => {
        console.log(res);
        this.order = res.data;
        this.address = res.data.address;
      })
      .catch(e => {
        console.log(e);
      });
  },
  methods: {
    tradeOrderCreate() {
      if (!this.order.id) {
        Tip.error('订单数据获取失败');
        return;
      }
      createTradeOrderApi({
        'order_id': this.order.id,
        'scope': 'shop',
        'paymode': 'wechat'
      })
        .then(res => {
          console.log(res);
          Tip.confirm(`请确认支付${this.order.pay}元的订单`)
            .then(() => {
              console.log('确认');
              this.createWechatPay(res.data.wechat);
            })
            .catch(() => {
              console.log('取消');
            });
        })
        .catch(e => {
          console.log(e);
        });
    },
    createWechatPay(data) {
      // const self = this;
      console.log('调起微信支付');
      console.log(data);
      wx.requestPayment({
        'timeStamp': data.timeStamp,
        'nonceStr': data.nonceStr,
        'package': data.package,
        'signType': data.signType,
        'paySign': data.paySign,
        'success': function(res) {
          console.log(res);
          Tip.success('支付成功');
        },
        'fail': function(res) {
          console.log('fail');
          console.log(res);
          Tip.error('支付失败');
        },
        'complete': function(res) {
          console.log('complete');
          console.log(res);
        }
      });
    }
  }
};
</script>

<style lang="scss">
@import "../theme-chalk/order.scss";
@import "../theme-chalk/orderlist.scss";
page {
  background: #f5f5f5;
}
.goodscontainer {
  background: #fff;
  margin-top: 20rpx;
}
.fixed-view {
  width: 100%;
  height: 100rpx;
}
</style>
